<template>
    <div>
        <h1>react和ref的细节</h1>
        <h2 ref="jian">m1:{{m1}}</h2>
        <h2>m2:{{m2}}</h2>
        <h2>m3:{{m3}}</h2>
    </div>
    <button @click="update">点击我</button>
</template>
<script lang="ts">
import { defineComponent,reactive,ref } from 'vue'

export default defineComponent({
    data(){
        
    },
    mounted(){
        console.log(this.$refs);
        
    },

    setup() {
        const m1 = ref("李子建");
        const m2 = reactive({
            name:"李子建",
            wife:{
                name:"小红"
            }
        });
        // ? 如果放进去对象或者数组 内部会自动的转化为reactive转化为的proxy对象  value就是这个对象
        const m3 = ref({
            name:"李子建",
            wife:{
                name:"小红"
            }
        })

        function update(){
            m1.value +="=====";
            m2.wife.name +="=========";
            m3.value.wife.name += "======"
        }
        return{
            m1,
            m2,
            m3,
            update
        }
    },
})

</script>
<style scoped>

</style>
